<template>
	<CustomNavBar :showBack="false" :bgColor="data.bgColor">
		<template #title>
			<view class="shouc">
				我的收藏
			</view>
		</template>
	</CustomNavBar>
	<view class="pages" :style="{ paddingTop: `${data.navBarHeight}px` }">
		<view class="nav_top">
			<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/bgpages.png" mode="aspectFill" class="bgImg"></image>
		</view>
		<view class="main" v-if="data.list.length>0">
			<view class="list" v-for="(item,index) in data.list" :key="index">
				<view class="card_box" >
					<image :src="item.imageUrl" mode="" class="card_picture" v-if="item.imageType == 'image'"></image>
					<video :src="item.imageUrl" class="card_picture" v-else></video>
					<view class="info" @click="handleJump(item.houseId)">
						<view class="title">
							{{item.name}}
						</view>
						<view class="des_label">
							<text>{{item.area}}m² </text>
							<text>｜{{item.floorNum}}/{{item.totalFloorNum}} </text>
							<text>｜{{item.facingName}} </text>
						</view>
						<view class="address">
							<image src="/static/coment/adderss.svg" class="address_icon" mode=""></image>
							{{item.address}}
						</view>
						<view class="price">
							<text>¥</text>
							{{item.price}}
							<text>/月</text>
						</view>
						<view class="label_box">
							<text v-for="(it,ins) in item.tagNameList" :key="ins">{{it}}</text>
							<!-- <text>有电梯</text>
							<text>可上网</text> -->
						</view>
					</view>
				</view>
				<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/zaizu.png" mode="aspectFit" class="state_icon" v-if="item.status == 2"></image>
				<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/yixiajia.png" mode="aspectFit" class="state_icon" v-if="item.status == 0">
				</image>
				<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/daizu.png" mode="aspectFit" class="state_icon" v-if="item.status == 1"></image>
				<!-- <image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/daizu.png" mode="aspectFit" class="state_icon" v-if="item.status == 3"></image> -->
				<view class="line">

				</view>
				<view class="btn_box">
					<view class="btn" @click="cancel(item)">
						取消收藏
					</view>
				</view>
			</view>
		</view>
		<view class="main dis" style="z-index: 9999;height: 80vh;" v-else>
			<view style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
				<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/noData.png" mode="aspectFit" style="width: 200rpx;height: 200rpx;"></image>
				<text>暂无数据</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import CustomNavBar from '@/components/CustomNavBar.vue';
	import {
		reactive,
		ref,
		onMounted
	} from 'vue'
	import {
		onReachBottom,
		onPageScroll,
		onShow
	} from '@dcloudio/uni-app'
	import {
		getData,cancelData
	} from './js/api.js'
	import http from '@/uitls/http.js';
	const app = getApp()
	const data = reactive({
		navBarHeight: 0,
		bgColor: '',
		list: [],
		pageData: {
			pageNum: 1,
			pageSize: 10
		},
		isReach: true
	})
	onMounted(() => {
		data.navBarHeight = app.globalData.navBarHeight + app.globalData.statusBarHeight + 30
		
	})
	onShow(()=>{
		// console.log('页面显示')
		getDataFunc(data.pageData)
		app.setTabBarBadge()
	})
	const handleJump = (id)=>{
		uni.navigateTo({
			url:'/pagesA/details/details?id=' +id
		})
	}
	const getDataFunc = async (objs) => {
		const res = await getData(objs)
		console.log(res)
		if (res.data.code != 0) {
			return http.isMssage(res.data.message)
		}
		const list =  res.data.data.list 
		if (list.length < 10) {
			data.isReach = false
		}
		data.list= res.data.data.list 
		// if(res.data.)
	}
	onReachBottom(() => {
		// console.log('上拉触底')
		if (!data.isReach) return
		data.pageData.pageNum++
		getDataFunc(data.pageData)
	})
	onPageScroll((event) => {
		if (event.scrollTop > 50) {
			data.bgColor = '#fff'
		} else {
			data.bgColor = ''
		}
		// console.log('页面滚动', event.scrollTop)
	})
	const cancel =async(objs) =>{
		const res =await cancelData(objs.id)
		console.log(res)
		if (res.data.code == 0) {
			// console.log(1)
			data.pageData.pageNum = 1
			data.isReach =true
			getDataFunc(data.pageData)
		}
		// return http.isMssage(res.data.message)
	}
</script>
<style>
	page {
		background-image: linear-gradient(180deg, #FFF7E0 0%, #FFF9E8 19%, #F6F6F6 100%) !important;
	}
</style>
<style scoped lang="less">
	.shouc {
		font-family: PingFangSC-Semibold;
		font-size: 34rpx;
		color: #000000;
		text-align: center;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pages {
		background-image: linear-gradient(180deg, #FFF7E0 0%, #FFF9E8 19%, #F6F6F6 100%);
		width: 100vw;
		height: 100vh;
		margin-bottom: 32rpx;
		// position: fixed;
		// top: 0;
		// border: 1px solid red;


	}

	.nav_top {

		position: fixed;
		height: 393rpx;
		top: 0;
		width: 750rpx;

		.bgImg {
			width: 100%;
			height: 393rpx;
		}
	}

	.main {
		margin: 0 20rpx 20rpx 20rpx;
		// background: #f6f6f6;

		.list {
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 20rpx;
			// margin-top: 32rpx;
			margin-bottom: 32rpx;
			position: relative;

			.card_box {
				display: flex;


				.card_picture {
					width: 200rpx;
					height: 180rpx;
				}

				.info {


					.title {
						font-family: PingFangSC-Semibold;
						font-size: 32rpx;
						color: #000000;
						line-height: 36rpx;
						font-weight: 600;
						margin-left: 16rpx;
						// margin-top: 16rpx;
						width: 315rpx;
						overflow: hidden;


						white-space: nowrap;
						/* 防止文本换行 */

						text-overflow: ellipsis;
						/* 使用省略号表示溢出 */

					}

					.des_label {
						font-family: ArialMT;
						font-size: 24rpx;
						color: #666666;
						line-height: 26rpx;
						font-weight: 400;
						margin-left: 16rpx;
						margin-top: 12rpx;
					}

					.address {
						font-family: PingFangSC-Regular;
						font-size: 26rpx;
						color: #9D9FA2;
						line-height: 36rpx;
						font-weight: 400;
						margin-left: 16rpx;
						margin-top: 12rpx;
						display: flex;

						.address_icon {
							width: 32rpx;
							height: 32rpx;
							margin-right: 16rpx;
						}
					}

					.price {
						font-family: Arial-BoldMT;
						font-size: 42rpx;
						color: #EE7930;
						margin-left: 16rpx;
						// margin-top: 12rpx;
						// text-align: right;
						// line-height: 36rpx;
						font-weight: 700;

						text {
							font-family: PingFangSC-Regular;
							font-size: 28rpx;
							color: #EE7930;
							text-align: right;
							// line-height: 36rpx;
							font-weight: 400;
						}
					}

					.label_box {
						display: flex;
						margin-left: 16rpx;

						// margin-top: 12rpx;
						text {
							font-family: PingFangSC-Regular;
							font-size: 20rpx;
							color: #666666;
							line-height: 24rpx;
							font-weight: 400;
							background: #F6F6F6;
							margin-right: 8rpx;
							padding: 4rpx 8rpx;
							height: 32rpx;
							line-height: 32rpx;
						}
					}

				}
			}

			.state_icon {
				position: absolute;
				right: 10rpx;
				top: 30rpx;
				width: 104rpx;
				height: 76rpx;
				// height: 120rpx;
			}

			.line {
				background: #EEEEEE;
				width: 100%;
				height: 2rpx;
				margin: 16rpx 0;
			}

			.btn_box {
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.btn {
					background: #EE7930;
					border-radius: 8rpx;
					padding: 12rpx 18rpx;
					color: #FFFFFF;
					font-size: 24rpx;
				}
			}
		}
	}
</style>